<template>
  <view class="member-list">
    <Paglist v-model="dataList" :parame="parame" :scroll-top-bottom="200" @register="register">
      <template v-for="v in dataList" :key="v.memberId">
        <view class="member-item" @click="toDetails(v)">
          <view class="member-avatar">
            <TImage :src="v.avatar" mode="aspectFill" width="200rpx" height="240rpx"></TImage>
          </view>
          <view class="member-info">
            <view class="member-info-top">
              <text class="member-info-name text-overflow-1">{{ v.leaderName }}</text>
              <text class="member-info-level">{{ v.socialPosition }}</text>
            </view>
            <view class="member-info-position">
              <text style="margin-right: 20rpx">{{ v.levelName }}</text>
              <text>{{ v.postName }}</text>
            </view>
            <view class="member-info-companyName">
              <text>{{ v.companyName }}</text>
            </view>
          </view>
        </view>
      </template>
    </Paglist>
  </view>
</template>

<script setup lang="ts">
  import { provide, reactive, ref, watch } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import type { MemberLeaderListData, MemberLeaderListResult } from '@/api/member/types';
  import TImage from '@/components/TImage/index.vue';
  import { propTypes } from '@/utils/propTypes';
  import { isFunction } from '@/utils/is';
  import { navigateTo } from '@/router';
  import { memberLeaderList } from '@/api/member';
  import { addProspectiveMembers } from '@/utils';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import { PotentialClientsTypeEnum } from '@/enums/commercializeEnum';


  provide('api', memberLeaderList);

  provide('tabIsShow', null);

  const props = defineProps({
    keyword: propTypes.string.def(''),
    filterParams: propTypes.object.def({}),
  });

  const dataList = ref<MemberLeaderListResult[]>([]);
  const parame = reactive<MemberLeaderListData>({
    current: 1,
    size: 10,
    keyword: undefined,
    areaId: undefined,
    typeId: undefined,
    levelId: undefined,
    industryId: undefined,
  });
  const [register, { refresh }] = useConList();

  function rest() {
    for (const k in parame) {
      if (k === 'current' || k === 'size' || k === 'keyword') continue;
      (parame as any)[k] = undefined;
    }
  }

  watch(
    () => props.keyword,
    (val) => {
      parame.keyword = val;
      isFunction(refresh) && refresh();
    },
  );

  const useUser = useUserStoreWithOut();
  const { cocInfo } = storeToRefs(useUser);
  const toDetails = (item: MemberLeaderListResult) => {
    const { leaderId } = item;

    if (leaderId) {
      if (!cocInfo.value) {
        return addProspectiveMembers({
          type: PotentialClientsTypeEnum.MEMBERUNIT,
          dataId: leaderId,
        });
      }

      navigateTo({
        name: 'personCard',
        options: {
          id: leaderId,
        },
      });
    }
  };

  watch(
    () => props.filterParams,
    (val) => {
      let keys = Object.keys(val);
      if (keys.length > 0) {
        keys.forEach((k) => parame.hasOwnProperty(k) && ((parame as any)[k] = val[k]));
      } else {
        rest();
      }

      isFunction(refresh) && refresh();
    },
  );
</script>

<style lang="scss" scoped>
  .member {
    &-list {
      margin-top: 30rpx;
    }
    &-item {
      height: min-content;
      background-color: #fff;
      margin-bottom: 4rpx;
      display: flex;
      padding: 25rpx 30rpx;
    }
    &-avatar {
      overflow: hidden;
      flex-shrink: 0;
      width: 200rpx;
    }
    &-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      &-top {
        display: flex;
        align-items: flex-end;
      }
      &-name {
        font-size: 32rpx;
        color: #333;
        font-weight: bolder;
        margin-right: 10rpx;
      }
      &-level,
      &-position,
      &-companyName {
        color: #aaabab;
        font-size: 24rpx;
      }
      &-position {
        color: #ef823a;
      }
    }
  }
</style>
